<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>权限树扩展分享</title>
	<link rel="stylesheet" type="text/css" href="/assets/layui/css/layui.css">
	<script type="text/javascript" src="/assets/layui/layui.js"></script>
</head>
<body>
<div class=" row-content layer-cf">
	<div class="layui-row  widget-bff">
		
		<div class="layui-col-md6 ">
			<!-- 此扩展能递归渲染一个权限树，点击深层次节点，父级节点中没有被选中的节点会被自动选中，单独点击父节点，子节点会全部 选中/去选中 -->
			<fieldset>
				<div class="widget-head layer-cf">
					<div class="widget-title layer-fl">角色管理</div>
				</div>
			</fieldset>
			 <form id="my-form" class="layer-form tpl-form-line-form layui-form" method="post">
				<div class="layui-form-item">
					<label class="layui-form-label layer-u-sm-3 layer-u-lg-2 ">角色名称</label>
					<div class="layer-u-sm-9 layer-u-end">
						<input class="layui-input" type="text" name="role[role_name]" placeholder="请输入角色名称" />
					</div>
				</div>
				<div class="layui-form-item">
					<label class="layui-form-label layer-u-sm-3 layer-u-lg-2 ">上级角色</label>
					<div class="layer-u-sm-9 layer-u-end">
						<select name="role[parent_id]">
							<option value="0"> 顶级角色 </option>
							<?php if (isset($roleList)): foreach ($roleList as $role): ?>
							
								<option value="<?= $role['role_id'] ?>"> <?= $role['role_name_h1'] ?></option>
							<?php endforeach; endif; ?>
						</select>
					</div>
				</div>
				<div class="layui-form-item">
					<label class="layui-form-label layer-u-sm-3 layer-u-lg-2 ">排序</label>
					<div class="layer-u-sm-9 layer-u-end">
						<input class="layui-input" type="text" name="role[sort]" placeholder="数字越小越靠前" />
					</div>
				</div>
				<div class="layui-form">
				<div class="layui-form-item">
					<div class="layui-form-label layer-u-sm-3 layer-u-lg-2 ">普通操作</div>
					<div class="layer-u-sm-9 layer-u-end">
						<button type="button" class="layui-btn layui-btn-primary" onclick="checkAll('#LAY-auth-tree-index')">全选</button>
						<button type="button" class="layui-btn layui-btn-primary" onclick="uncheckAll('#LAY-auth-tree-index')">全不选</button>
						<button type="button" class="layui-btn layui-btn-primary" onclick="showAll('#LAY-auth-tree-index')">全部展开</button>
						<button type="button" class="layui-btn layui-btn-primary" onclick="closeAll('#LAY-auth-tree-index')">全部隐藏</button>
					</div>
				</div>
			</div>
				<div class="layui-form-item">
					<label class="layui-form-label layer-u-sm-3 layer-u-lg-2 ">选择权限</label>
					<div class="layer-u-sm-9 layer-u-end">
						<div id="LAY-auth-tree-index"></div>
					</div>
				</div>
				<div class="layui-form-item">
					<div class="layui-input-block">
						<button class="layui-btn " type="submit" lay-submit lay-filter="LAY-auth-tree-submit">提交</button>
						<button class="layui-btn layui-btn-primary" type="reset">重置</button>
					</div>
				</div>
			</form>
		</div>
	</div>
</div>
</body>
<script type="text/javascript">
 $(function () {

	/**
	 * 表单验证提交
	 * @type {*}
	 */
	$('#my-form').superForm();

});
layui.config({
	base: 'assets/extends/',
}).extend({
	authtree: 'authtree',
});
layui.use(['jquery', 'authtree', 'form', 'layer'], function(){
	var $ = layui.jquery;
	var authtree = layui.authtree;
	var form = layui.form;
	var layer = layui.layer;
	// 初始化
	$.ajax({
		url: '{:url("store.role/role")}',
		dataType: 'json',
		success: function(data){
			// 渲染时传入渲染目标ID，树形结构数据（具体结构看样例，checked表示默认选中），以及input表单的名字
			authtree.render('#LAY-auth-tree-index', data.data.accessList, {
				inputname: 'role[access][]'
				,layfilter: 'lay-check-auth'
				// ,autoclose: false
				// ,autochecked: false
				// ,openchecked: true
				// ,openall: true
				,autowidth: true
			});

			// PS:使用 form.on() 会引起了事件冒泡延迟的BUG，需要 setTimeout()，并且无法监听全选/全不选
			// PS:如果开启双击展开配置，form.on()会记录两次点击事件，authtree.on()不会
			form.on('checkbox(lay-check-auth)', function(data){
				// 注意这里：需要等待事件冒泡完成，不然获取叶子节点不准确。
				setTimeout(function(){
					console.log('监听 form 触发事件数据', data);
					// 获取选中的叶子节点
					var leaf = authtree.getLeaf('#LAY-auth-tree-index');
					console.log('leaf', leaf);
					// 获取最新选中
					var lastChecked = authtree.getLastChecked('#LAY-auth-tree-index');
					console.log('lastChecked', lastChecked);
					// 获取最新取消
					var lastNotChecked = authtree.getLastNotChecked('#LAY-auth-tree-index');
					console.log('lastNotChecked', lastNotChecked);
				}, 100);
			});
			// 使用 authtree.on() 不会有冒泡延迟
			authtree.on('change(lay-check-auth)', function(data) {
				console.log('监听 authtree 触发事件数据', data);
				// 获取所有节点
				var all = authtree.getAll('#LAY-auth-tree-index');
				console.log('all', all);
				// 获取所有已选中节点
				var checked = authtree.getChecked('#LAY-auth-tree-index');
				console.log('checked', checked);
				// 获取所有未选中节点
				var notchecked = authtree.getNotChecked('#LAY-auth-tree-index');
				console.log('notchecked', notchecked);
				// 获取选中的叶子节点
				var leaf = authtree.getLeaf('#LAY-auth-tree-index');
				console.log('leaf', leaf);
				// 获取最新选中
				var lastChecked = authtree.getLastChecked('#LAY-auth-tree-index');
				console.log('lastChecked', lastChecked);
				// 获取最新取消
				var lastNotChecked = authtree.getLastNotChecked('#LAY-auth-tree-index');
				console.log('lastNotChecked', lastNotChecked);
			});
			authtree.on('deptChange(lay-check-auth)', function(data) {
				console.log('监听到显示层数改变',data);
			});
		},
		error: function(xml, errstr, err) {
			layer.alert(errstr+'，获取样例数据失败，请检查是否部署在本地服务器中！');
		}
	});

});
</script>
<script type="text/javascript">

// 全选样例
function checkAll(dst){
	layui.use(['jquery', 'layer', 'authtree'], function(){
		var layer = layui.layer;
		var authtree = layui.authtree;

		authtree.checkAll(dst);
	});
}
// 全不选样例
function uncheckAll(dst){
	layui.use(['jquery', 'layer', 'authtree'], function(){
		var layer = layui.layer;
		var authtree = layui.authtree;

		authtree.uncheckAll(dst);
	});
}
// 显示全部
function showAll(dst){
	layui.use(['jquery', 'layer', 'authtree'], function(){
		var layer = layui.layer;
		var authtree = layui.authtree;

		authtree.showAll(dst);
	});
}
// 隐藏全部
function closeAll(dst){
	layui.use(['jquery', 'layer', 'authtree'], function(){
		var layer = layui.layer;
		var authtree = layui.authtree;

		authtree.closeAll(dst);
	});
}
</script>
</html>